<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.box {
				width: 600px;
				height: 600px;
				border: 2px solid black;
				position: relative;
			}

			.in {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;

				/* 可以使元素上下左右居中 */
				/*top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;*/

				/*left: 250px;
				top: 250px;*/
				
				/* 运算符左右一定要带空格 */
				left: calc(50% - 50px); 
				top: calc(50% - 50px);
			}

			.parent {
				position: relative;
				width: 500px;
				height: 500px;
				background-color: pink;
			}

			.red {
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: red;

				/* 
					层级
				*/
				z-index: 2;
			}

			.blue {
				position: absolute;
				width: 200px;
				height: 200px;
				background-color: blue;
				z-index: 1;
			}

			.black {
				position: absolute;
				width: 300px;
				height: 300px;
				background-color: black;
			}

		</style>
	</head>
	<body>

		<div class="box">
			<div class="in"></div>
		</div>

		<div class="parent">
			<div class="red"></div>
			<div class="blue"></div>
			<div class="black"></div>
		</div>
		
	</body>
</html>